<template>
  <div class="blog-actions-toolbar">
    <el-tooltip content="点赞" placement="right">
      <el-button class="action-button" type="success" circle @click="handleLike">
        <svg-icon icon-class="like" :size="20" />
      </el-button>
    </el-tooltip>
    <el-tooltip content="踩" placement="right">
      <el-button class="action-button" type="warning" circle @click="handleDislike">
        <svg-icon icon-class="unlike" :size="20" />
      </el-button>
    </el-tooltip>
    <el-tooltip content="收藏" placement="right">
      <el-button class="action-button" type="danger" circle @click="handleCollect">
        <svg-icon icon-class="collection" :size="20" />
      </el-button>
    </el-tooltip>
    <el-tooltip content="评论" placement="right">
      <el-button class="action-button" type="primary" circle @click="openCommentDrawer">
        <svg-icon icon-class="message" :size="20" />
      </el-button>
    </el-tooltip>
    <el-tooltip content="举报" placement="right">
      <el-button class="action-button" type="danger" circle @click="handleReport">
        <svg-icon icon-class="frown" :size="20" />
      </el-button>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';

// 定义组件属性
const props = defineProps({
  isFollowed: {
    type: Boolean,
    default: false
  },
  likes: {
    type: String,
    default: '0'
  }
});

// 定义事件发射
const emit = defineEmits([
  'follow',
  'unfollow',
  'like',
  'dislike',
  'collect',
  'openCommentDrawer',
  'report'
]);

// 处理点赞
const handleLike = () => {
  emit('like');
};

// 处理踩
const handleDislike = () => {
  emit('dislike');
};

// 处理收藏
const handleCollect = () => {
  emit('collect');
};

// 打开评论抽屉
const openCommentDrawer = () => {
  emit('openCommentDrawer');
};

// 处理举报
const handleReport = () => {
  emit('report');
};
</script>

<style scoped lang="scss">
.blog-actions-toolbar {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 100;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);

  .action-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(228, 234, 255, 0.8);
    margin: 0px;
    transform: scale(1);

    &:hover {
      transform: scale(1.3);
      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
      z-index: 1;
    }
  }
}

// 在小屏幕设备上隐藏工具栏
// @media (max-width: 1200px) {
//   .blog-actions-toolbar {
//     display: none;
//   }
// }
</style>
